<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="任务详情"
    width="800px"
    :showOkBtn="false"
    cancelText="关闭"
  >
    <el-descriptions :column="1" :border="true">
      <el-descriptions-item label="任务编号">{{ data.desData.id }}</el-descriptions-item>
      <el-descriptions-item label="任务名称">{{ data.desData.name }}</el-descriptions-item>
      <el-descriptions-item label="所属流程">{{
        data.desData.processInstance ? data.desData.processInstance.name : ''
      }}</el-descriptions-item>
      <el-descriptions-item label="流程发起人">{{
        data.desData.processInstance ? data.desData.processInstance.startUserNickname : ''
      }}</el-descriptions-item>
      <el-descriptions-item label="结果"
        ><Tag color="primary" v-if="data.desData.result === 1">处理中</Tag>
        <Tag color="success" v-if="data.desData.result === 2">通过</Tag>
        <Tag color="error" v-if="data.desData.result === 3">不通过</Tag>
        <Tag color="info" v-if="data.desData.result === 4">已取消</Tag>
      </el-descriptions-item>
      <el-descriptions-item label="原因">{{ data.desData.reason }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{
        useRender.renderDate(data.desData.createTime)
      }}</el-descriptions-item>
    </el-descriptions>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useRender } from '/@/components/Table';
  import { DICT_TYPE } from '/@/utils/dict';
  import { Tag } from 'ant-design-vue';
  export default defineComponent({
    components: { BasicModal, Tag },
    setup() {
      const data = reactive({
        desData: {},
      });
      const [register, { closeModal, setModalProps }] = useModalInner((record) => {
        data.desData = record.record;
      });
      return {
        register,
        closeModal,
        setModalProps,
        data,
        useRender,
        DICT_TYPE,
      };
    },
  });
</script>
